<template>
  <div class="my-address-container">
    <Header
      title="收货地址"
      right-text="新增"
      :rightFn="newAddress"
      :leftClick="goBack"
    />
    <p class="no-data" v-show="addressList.length === 0 && none">暂无收货地址</p>
    <List
      :finished="none"
      v-model="loading"
      class="list"
    >
      <Panel
        v-for="item in addressList"
        :key="item.Id"
        :title="item.Contact + item.Gender"
        :desc="item.Address + item.HouseNo"
        :status="item.Mobile"
      >
        <div slot="footer">
          <Button v-if="isSelect" size="small" type="info" @click="select(item)">选择</Button>
          <Button size="small" type="primary" @click="handleEdit(item)">编辑</Button>
          <Button size="small" type="danger" @click="handleDelete(item.Id)" :loading="deleteLoading">删除</Button>
        </div>
      </Panel>
    </List>
  </div>
</template>
<script>
import Header from '@/components/Header'
import { List, Panel, Button, Dialog } from 'vant';
export default {
  components: {
    Header,
    List,
    Panel,
    Button
  },
  data() {
    return {
      loading: false,
      none: false,
      addressList: [],
      deleteLoading: false,
      isSelect: false
    }
  },
  methods: {
    newAddress() {
      this.$router.push('/my/address/new');
    },
    getData() {
      this.loading = true;
      this.$http.my.address().then(({ result }) => {
        this.addressList = result;
        this.loading = false;
        this.none = true;
      })
    },
    select(data) {
      if (this.isSelect) {
        this.$store.commit('SET_ADDRESS', data);
        this.$router.go(-1);
      }
    },
    goBack() {
      this.$route.meta.notKeepAlive = true;
      this.$router.go(-1);
    },
    handleEdit(data) {
      this.$store.commit("SET_ADDRESS_EDIT", data);
      this.$router.push(`/my/address/new?id=${data.Id}`);
    },
    handleDelete(id) {
      Dialog.confirm({
        title: '提示',
        message: '确认删除该收获地址？',
        showCancelButton: true,
      }).then(() => {
        this.deleteLoading = true;
        setTimeout(() => {
          this.deleteLoading = false;
        }, 1000);
      })
    }
  },
  created() {
    this.isSelect = this.$route.query.select === 'true';
    this.getData();
  },
  activated() {
    this.getData();
  }
}
</script>
<style lang="less" scoped>
.my-address-container{
  .no-data{
    margin: 50px auto;
    color: #999;
    font-size: 28px;
    text-align: center;
  }
  .list{
    .item{

    }
  }
}
</style>
<style lang="less">
.my-address-container{
  .van-cell__title{
    flex: 2;
  }
  .van-panel__footer{
    text-align: right;
    .van-button{
      margin-left: 15PX;
    }
  }
  .van-cell__label{
    font-size: 14PX;
  }
}
</style>
